<template>
  <view class="status-bar">
    <view class="left">
      <text class="app-name">站设备监视软件</text>
    </view>
    <view class="center">
      <text class="time">{{ currentTime }}</text>
    </view>
    <view class="right">
      <text class="user-name">{{ userName }}</text>
      <button class="logout-btn" @click="handleLogout">退出</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const userName = ref(userStore.userName)
const currentTime = ref('')
let timer = null

const updateTime = () => {
  const now = new Date()
  const hours = now.getHours().toString().padStart(2, '0')
  const minutes = now.getMinutes().toString().padStart(2, '0')
  const seconds = now.getSeconds().toString().padStart(2, '0')
  currentTime.value = `${hours}:${minutes}:${seconds}`
}

const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        userStore.logout()
        uni.reLaunch({
          url: '/pages/login/login'
        })
      }
    }
  })
}

onMounted(() => {
  updateTime()
  timer = setInterval(updateTime, 1000)
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style lang="scss" scoped>
.status-bar {
  width: 100%;
  height: 88rpx;
  background-color: #0066cc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  box-sizing: border-box;
  color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;

  .left {
    .app-name {
      font-size: 32rpx;
      font-weight: bold;
    }
  }

  .center {
    .time {
      font-size: 28rpx;
    }
  }

  .right {
    display: flex;
    align-items: center;
    gap: 20rpx;

    .user-name {
      font-size: 28rpx;
    }

    .logout-btn {
      background: transparent;
      border: 1px solid #ffffff;
      color: #ffffff;
      font-size: 24rpx;
      padding: 4rpx 16rpx;
      border-radius: 30rpx;
      line-height: 1.5;
      height: auto;
      margin: 0;

      &::after {
        border: none;
      }
    }
  }
}
</style> 